<template>
  <div style>
    <!-- 修改展示页面 -->
    <div style="width: 90%; margin: 0px auto; margin-top: 20px">
      <p style="color: #3a3a3a">以下变更无需审核，修改后即时生效</p>
      <div v-if="!isSmall">
        <a-form @submit="handleSubmit" style="margin-top: 8px" :form="form">
          <div style="width: 80%">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >经营信息</a-col
              >
            </a-row>
            <a-form-item v-bind="formItemLayout" label="实际经营地址">
              <a-cascader
                class="w-sty"
                v-decorator="[
                  'Address',
                  { rules: [{ required: true, message: '实际经营地址' }] },
                ]"
                :options="options2"
                @change="onChange"
                placeholder="请选择经营地址"
              />
            </a-form-item>

            <a-form-item
              v-bind="formItemLayout"
              help="此地址将作为之后协议/资料寄送的默认地址，请准确填写"
              label="详细地址"
            >
              <a-textarea
                class="width-sty"
                v-decorator="[
                  'realAddress',
                  {
                    rules: [
                      { required: true, message: '请输入实际经营详细地址' },
                    ],
                  },
                ]"
                placeholder="请输入实际经营详细地址"
                :rows="2"
              />
            </a-form-item>

            <a-form-item v-bind="formItemLayout1" label="经营场所">
              <a-radio-group
                v-decorator="[
                  'placeRight',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择经营场所是否自有或租赁',
                      },
                    ],
                  },
                ]"
                @change="onChange2"
              >
                <a-radio value="place_right_001">自有</a-radio>
                <a-radio value="place_right_002">租赁</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item v-bind="formItemLayout1" label="经营场所面积">
              <a-select
                style="width: 50%"
                v-decorator="[
                  'placeArea',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择',
                      },
                    ],
                  },
                ]"
                placeholder="请选择"
              >
                <a-select-option v-for="d in areaoptions" :key="d.value">{{
                  d.text
                }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-bind="formItemLayout1" label="员工人数">
              <a-select
                style="width: 50%"
                v-decorator="[
                  'orgEmployees',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择',
                      },
                    ],
                  },
                ]"
                placeholder="请选择"
              >
                <a-select-option v-for="d in numoptions" :key="d.value">{{
                  d.text
                }}</a-select-option>
              </a-select>
            </a-form-item>

            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >业务联系人</a-col
              >
            </a-row>
            <a-form-item v-bind="formItemLayout1" label="姓名">
              <a-input
                class="inputWidth"
                v-decorator="[
                  'businessName',
                  { rules: [{ required: true, message: '请输入姓名' }] },
                ]"
                placeholder="请输入姓名"
              />
            </a-form-item>
            <a-form-item v-bind="formItemLayout1" label="联系电话">
              <a-input
                class="inputWidth"
                v-decorator="[
                  'businessphone',
                  {
                    rules: [
                      { required: true, message: '请输入联系电话!' },
                      { validator: validateCode },
                    ],
                    validateTrigger: 'blur',
                  },
                ]"
                placeholder="请输入联系电话"
              />
            </a-form-item>
            <a-form-item v-bind="formItemLayout1" label="Email">
              <a-input
                class="inputWidth"
                v-decorator="[
                  'businessemail',
                  {
                    rules: [
                      { type: 'email', message: '请输入有效邮箱地址!' },
                      { required: true, message: '请输入邮箱地址!' },
                      { validator: validatemail },
                    ],
                    validateTrigger: 'blur',
                  },
                ]"
                placeholder="请输入Email"
              />
            </a-form-item>

            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" class="formGroupTitle"
                >实际控制人信息</a-col
              >
            </a-row>
            <a-form-item v-bind="formItemLayout" label="姓名">
              <a-input
                class="width-sty"
                v-decorator="[
                  'identityName2',
                  {
                    rules: [
                      { required: true, message: '请输入实际控制人姓名' },
                    ],
                  },
                ]"
                placeholder="请输入实际控制人姓名"
              />
            </a-form-item>

            <a-form-item v-bind="formItemLayout" label="证件类型">
              <div>
                <a-select
                  disabled
                  class="width-sty"
                  v-decorator="[
                    'codetype2',
                    {
                      rules: [{ required: true, message: '请选择证件类型' }],
                      initialValue: 'legal',
                    },
                  ]"
                >
                  <a-select-option value="legal">身份证</a-select-option>
                  <a-select-option value="lucy">护照</a-select-option>
                  <a-select-option value="disabled"
                    >港澳台通行证</a-select-option
                  >
                  <a-select-option value="Yiminghe">军官证</a-select-option>
                  <a-select-option value="Yiminghe">户口簿</a-select-option>
                </a-select>
              </div>
            </a-form-item>

            <a-form-item v-bind="formItemLayout" label="证件号码">
              <a-input
                class="width-sty"
                v-decorator="[
                  'identityNo2',
                  {
                    rules: [
                      { required: true, message: '请输入证件号码' },
                      {
                        validator: validateIdentityNo,
                      },
                    ],
                    validateTrigger: 'blur',
                  },
                ]"
                placeholder="请输入证件号码"
              />
            </a-form-item>

            <a-form-item v-bind="formItemLayout" label="证件有效期">
              <a-date-picker
                placeholder="请选择证件有效期"
                @change="dateChange2"
                v-decorator="[
                  'expiryDate2',
                  { rules: [{ required: true, message: '请选择证件有效期' }] },
                ]"
              />
            </a-form-item>
          </div>
          <div style="text-align: center; margin: 20px 0">
            <a-button
              type="primary"
              style="width: 6vw"
              htmlType="submit"
              :loading="iconLoading"
              >保存</a-button
            >
            <a-button
              type="primary"
              style="width: 6vw; margin-left: 1vw"
              @click="gologin"
              >取消</a-button
            >
          </div>
        </a-form>
      </div>

      <div v-if="isSmall">
        <a-form
          @submit="SmallhandleSubmit"
          style="margin-top: 8px"
          :form="Smallform"
        >
          <div style="width: 80%">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >经营信息</a-col
              >
            </a-row>

            <a-form-item v-bind="formItemLayout" label="实际经营地址">
              <a-cascader
                class="w-sty"
                v-decorator="[
                  'Address',
                  { rules: [{ required: true, message: '实际经营地址' }] },
                ]"
                :options="options2"
                @change="onChange"
                placeholder="请选择经营地址"
              />
            </a-form-item>

            <a-form-item
              v-bind="formItemLayout"
              help="此地址将作为之后协议/资料寄送的默认地址，请准确填写"
              label="详细地址"
            >
              <a-textarea
                class="width-sty"
                v-decorator="[
                  'realAddress',
                  {
                    rules: [
                      { required: true, message: '请输入实际经营详细地址' },
                    ],
                  },
                ]"
                placeholder="请输入实际经营详细地址"
                :rows="2"
              />
            </a-form-item>

            <div style="text-align: center; margin: 20px 0">
              <a-button
                type="primary"
                style="width: 6vw"
                htmlType="submit"
                :loading="iconLoading"
                >保存</a-button
              >
              <a-button
                type="primary"
                style="width: 6vw; margin-left: 1vw"
                @click="gologin"
                >取消</a-button
              >
            </div>
          </div>
        </a-form>
      </div>

      <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
        <div style="text-align: center">
          <a-button type="primary" @click="gologin">确定</a-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";

import DetailList from "../../../../components/tool/DetailList";

import pick from "lodash.pick";
import api from "@/common/api";
import { get, post } from "@/common/api";
import moment from "moment";
import { type } from "os";
import { message } from "ant-design-vue";
const dateFormat = "YYYY-MM-DD";

const ATabPane = ATabs.TabPane;
const DetailListItem = DetailList.Item;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    DetailListItem,
    DetailList,
  },
  data() {
    return {
      docking: true,
      iscategory: true,
      spinning: false,
      query: {},
      information: { controlIdentity: {}, merchant: { orgProductTypes: [] } },
      control: {},
      merchant: {},
      auth: {},
      customerOrg: {},
      iconLoading: false,
      type: null,
      visible: false,
      form: this.$form.createForm(this),
      Smallform: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      isMerchant: false,
      isSmall: false,
      options2: [],
      options: [],
      address: [],
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12 },
        },
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12 },
        },
      },
      formItemLayout3: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 12 },
        },
      },
      areaoptions: [
        { text: "200平米以上", value: "place_area_001" },
        { text: "100-200平米(含)", value: "place_area_002" },
        { text: "50-100平米(含)", value: "place_area_003" },
        { text: "50平米以下(含)", value: "place_area_004" },
      ],
      numoptions: [
        { text: "500人以上", value: "org_employees_001" },
        { text: "100-500人(含)", value: "org_employees_002" },
        { text: "50-100人(含)", value: "org_employees_003" },
        { text: "10-50人(含)", value: "org_employees_004" },
        { text: "0-10人(含)", value: "org_employees_005" },
      ],
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.getareaData();
  },
  activated() {
    console.log(this.$route);
    console.log(this.$route.params.id);
    if (this.$route.params.type == "small") {
      this.isSmall = true;
    } else if (this.$route.params.type == "org") {
      this.isSmall = false;
    }
    this.comModify();
  },
  methods: {
    moment,
    handleSubmit(e) {
      //提交修改信息
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log("ssss");
          this.iconLoading = true;

          let update = {
            identityRequest: {
              memberNo: this.$route.params.id,
              type: "control",
              idNo: this.control.idNo,
              identityName: values.identityName2,
              identityNo: values.identityNo2,
              expiryDate:
                this.information.controlIdentity.expiryDate ||
                this.control.expiryDate,
            },
            memberNo: this.$route.params.id,
            merchantType: this.$route.params.type,
            realProvince: this.information.realProvince,
            realCity: this.information.realCity,
            realDistrict: this.information.realDistrict,
            realAddress: values.realAddress,
            realProvinceName: this.information.realProvinceName,
            realCityName: this.information.realCityName,
            realDistrictName: this.information.realDistrictName,
            placeRight: values.placeRight,
            placeArea: values.placeArea,
            orgEmployees: values.orgEmployees,
            contactName: values.businessName,
            contactEmail: values.businessemail,
            contactPhone: values.businessphone,
          };
          // console.log("update", update);
          this.$axios
            .post("/agent/merchant/information/general/update", update)
            .then(
              (res) => {
                console.log("提交更改", res);
                if (res.data.code == "OK") {
                  this.iconLoading = false;
                  this.$message.success("变更成功！");
                  this.$router.replace({ path: "/OrgRegister/orgInfoQuery" });
                } else {
                  this.$message.warning(res.data.message);
                  this.iconLoading = false;
                }
              },
              (err) => {
                this.iconLoading = false;
              }
            );
        }
      });
    },
    SmallhandleSubmit(e) {
      //提交修改信息
      e.preventDefault();
      this.Smallform.validateFields((err, values) => {
        if (!err) {
          // console.log("ssss");
          this.iconLoading = true;

          let update = {
            identityRequest: {
              memberNo: this.$route.params.id,
              type: "control",
              idNo: this.control.idNo,
              expiryDate:
                this.information.controlIdentity.expiryDate ||
                this.control.expiryDate,
            },
            memberNo: this.$route.params.id,
            merchantType: this.$route.params.type,
            realProvince: this.information.realProvince,
            realCity: this.information.realCity,
            realDistrict: this.information.realDistrict,
            realAddress: values.realAddress,
            realProvinceName: this.information.realProvinceName,
            realCityName: this.information.realCityName,
            realDistrictName: this.information.realDistrictName,
          };
          // console.log("update", update);
          this.$axios
            .post("/agent/merchant/information/general/update", update)
            .then(
              (res) => {
                console.log("提交更改", res);
                if (res.data.code == "OK") {
                  this.iconLoading = false;
                  this.$message.success("变更成功！");
                  this.$router.replace({ path: "/OrgRegister/orgInfoQuery" });
                } else {
                  this.$message.warning(res.data.message);
                  this.iconLoading = false;
                }
              },
              (err) => {
                this.iconLoading = false;
              }
            );
        }
      });
    },
    onChange(value, selectedOptions) {
      // console.log("changevalue", typeof value, value);
      this.text = value;
      // this.text = selectedOptions.map(o => o.label);
      if (selectedOptions.length == 1) {
      } else if (selectedOptions.length == 2) {
      } else if (selectedOptions.length == 3) {
        (this.information.realProvinceName = selectedOptions[0].label),
          (this.information.realProvince = selectedOptions[0].value);
        (this.information.realCityName = selectedOptions[1].label),
          (this.information.realCity = selectedOptions[1].value);
        (this.information.realDistrictName = selectedOptions[2].label),
          (this.information.realDistrict = selectedOptions[2].value);
      } else {
        console.log(selectedOptions);
      }
      console.log(this.information);
    },
    onChange2(e) {
      // console.log("radio checked", e.target.value);
      this.information.placeRight = e.target.value;
    },

    reset() {},
    conexport() {},
    callback() {},
    getareaData() {
      this.$axios.get("/agent/division/all").then((res) => {
        // console.log("地址", res);
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: [],
            };
            arr.push(test);
            if (item.children) {
              let children = [];
              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: [],
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value,
                    };
                    child2.push(test3);
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }
            return arr;
          });
          // console.log("newArr", newArr);
          this.options = newArr[0];
          this.options2 = newArr[0];
        } else {
          console.log("res", res);
        }
      });
    },
    handleSearch() {},
    handleChange(value) {
      console.log(value);
    },
    dateChange2(date, dateString) {
      // console.log("dateString2", dateString);
      this.information.controlIdentity.expiryDate = dateString; //证件有效期
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
        console.log("身份证号码！", value);
      }
      callback();
    },
    handleOk() {
      this.$router.push("/home");
    },
    gologin() {
      this.$router.push(
        "/OrgRegister/orgInfoQueryDetail/" + this.$route.params.id
      );
      // location.reload();
    },
    comModify() {
      //修改查询
      this.iconLoading = true;
      this.$axios
        .get(
          "/agent/merchant/information/change/general/" + this.$route.params.id
        )
        .then(
          (res) => {
            this.iconLoading = false;

            this.merchant = res.data.data.merchantPospDTO;
            this.control = res.data.data.merchantPospDTO.identityControlDTO
              ? res.data.data.merchantPospDTO.identityControlDTO
              : "";

            this.information.realProvince = this.merchant.realProvince;
            this.information.realCity = this.merchant.realCity;
            this.information.realDistrict = this.merchant.realDistrict;
            this.information.realProvinceName = this.merchant.realProvinceName;
            this.information.realCityName = this.merchant.realCityName;
            this.information.realDistrictName = this.merchant.realDistrictName;

            if (this.$route.params.type == "small") {
              this.$nextTick(() => {
                //实际经营地址
                this.Smallform.setFieldsValue({
                  Address: [
                    this.merchant.realProvince,
                    this.merchant.realCity,
                    this.merchant.realDistrict,
                  ],
                  realAddress: this.merchant.realAddress, //详细地址
                });
              });
            } else {
              this.$nextTick(() => {
                //实际经营地址
                this.form.setFieldsValue({
                  Address: [
                    this.merchant.realProvince,
                    this.merchant.realCity,
                    this.merchant.realDistrict,
                  ],
                  realAddress: this.merchant.realAddress, //详细地址

                  placeRight: this.merchant.placeRight, //经营场所
                  placeArea: this.merchant.placeArea, //详细地址面积
                  orgEmployees: this.merchant.orgEmployees, //员工人数
                  businessName: this.merchant.contactName, //联系人姓名
                  businessphone: this.merchant.contactPhone, //联系人电话
                  businessemail: this.merchant.contactEmail, //联系人邮箱
                  identityName2: this.control.identityName, //控制人姓名
                  codetype2: "身份证", //卡类型
                  identityNo2: this.control.identityNo, //证件号码
                  expiryDate2: moment(this.control.expiryDate), //有效日期
                });
              });
            }
          },
          (err) => {
            this.iconLoading = false;
          }
        );
    },
    validatemail(rule, value, callback) {
      const reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );
      if (value && !reg.test(value)) {
        callback("您输入的邮箱格式有误！");
        return;
      } else {
        this.emailvalue = value;
        console.log(this.emailvalue);
        callback();
      }
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        /* eslint-disable-next-line */
        this.phone = false;
        callback("您输入手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
          console.log(this.phonevalue);
        }
        callback();
      }
    },
    tomaininfo() {
      this.$router.push("/org/infoset/maininfochange");
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

// .ant-input {
//   width: 50%;
// }
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 20px;
  text-align: right;
}

// .formGroupTitle {
//   font-size: 20px;
//   font-weight: bold;

// }
.ant-tabs-nav {
  float: right;
}

.content4 {
  display: flex;
  margin-bottom: 20px;

  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .conright {
    padding: 0 20px;

    span {
      margin-right: 20px;
    }
  }
}

.row-sty {
  margin-bottom: 20px;
}

.width-sty {
  width: 50%;
}

.w-sty {
  width: 60%;
}

.span-sty {
  display: block;
  text-align: center;
  padding-right: 8px;
  color: #999;
}

.p-sty {
  color: #999;
  padding-left: 30px;
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.card_sty {
  margin-bottom: 30px;
}
.inputWidth {
  width: 50%;
}
</style>